<style>
    :root {
        --primary: #4361ee;
        --secondary: #3f37c9;
        --accent: #4895ef;
        --light: #f8f9fa;
        --dark: #212529;
        --success: #4cc9f0;
        --warning: #f72585;
        --info: #4cc9f0;
        --creative: #7209b7;
        --minimal: #3a0ca3;
        --modern: #480ca8;
        --vintage: #8b4513;
        --playful: #f72585;
        --professional: #1d3557;
        --transition: all 0.3s ease;
    }

    body {
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
        background-color: #f5f5f5;
        padding: 3rem 0;
        color: #333;
    }

    .container {
        max-width: 1200px;
    }

    .page-title {
        text-align: center;
        margin-bottom: 3rem;
        font-weight: 700;
        color: var(--dark);
    }

    .section-description {
        text-align: center;
        max-width: 700px;
        margin: 0 auto 4rem;
        color: #666;
    }

    .style-category {
        margin-bottom: 5rem;
    }

    .category-title {
        font-size: 1.5rem;
        margin-bottom: 2rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid var(--primary);
        display: inline-block;
    }

    .name-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 2rem;
    }

    /***  基础样式  ***/
    .name-card {
        background-color: white;
        border-radius: 10px;
        padding: 2rem;
        text-align: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        transition: var(--transition);
    }

    .name-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 20px rgba(0, 0, 0, 0.12);
    }

    .name-card .name-display {
        margin-bottom: 1rem;
        transition: var(--transition);
        position: relative;
        display: inline-block;
    }

    .name-card:hover .name-display {
        transform: scale(1.05);
    }

    .name-card .name-style {
        font-size: 0.9rem;
        color: #666;
        margin-bottom: 0.5rem;
    }

    .name-card .name-description {
        font-size: 0.85rem;
        color: #888;
        margin-bottom: 0;
    }

    /* 现代简约风格 */
    .name-card .modern-simple {
        font-family: 'Helvetica Neue', Arial, sans-serif;
        font-size: 2.5rem;
        font-weight: 700;
        color: var(--modern);
    }

    .name-card .modern-thin {
        font-family: 'Segoe UI', Tahoma, sans-serif;
        font-size: 2.5rem;
        font-weight: 300;
        color: var(--dark);
        letter-spacing: 2px;
    }

    .name-card .modern-uppercase {
        font-family: 'Arial', sans-serif;
        font-size: 2rem;
        font-weight: 600;
        color: var(--accent);
        text-transform: uppercase;
        letter-spacing: 3px;
    }

    .name-card .modern-outline {
        font-family: 'Roboto', sans-serif;
        font-size: 2.5rem;
        font-weight: 900;
        color: transparent;
        -webkit-text-stroke: 1px var(--modern);
    }

    /* 创意风格 */
    .name-card .creative-cursive {
        font-family: 'Brush Script MT', cursive;
        font-size: 3rem;
        color: var(--creative);
    }

    .name-card .creative-stroke {
        font-family: 'Impact', sans-serif;
        font-size: 2.5rem;
        color: white;
        text-shadow: -1px -1px 0 var(--creative),
        1px -1px 0 var(--creative),
        -1px 1px 0 var(--creative),
        1px 1px 0 var(--creative);
    }

    .name-card .creative-slant {
        font-family: 'Georgia', serif;
        font-size: 2.5rem;
        font-style: italic;
        color: var(--creative);
        transform: rotate(-2deg);
    }

    .name-card .creative-gradient {
        font-family: 'Trebuchet MS', sans-serif;
        font-size: 2.5rem;
        font-weight: bold;
        background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .name-card .creative-shadow {
        font-family: 'Comic Sans MS', cursive;
        font-size: 2.5rem;
        color: var(--playful);
        text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.2);
    }

    /* 专业商务风格 */
    .name-card .professional-bold {
        font-family: 'Times New Roman', serif;
        font-size: 2.5rem;
        font-weight: 700;
        color: var(--professional);
    }

    .name-card .professional-elegant {
        font-family: 'Palatino', serif;
        font-size: 2.3rem;
        color: var(--professional);
        letter-spacing: 1px;
    }

    .name-card .professional-accent {
        font-family: 'Garamond', serif;
        font-size: 2.5rem;
        color: var(--dark);
    }

    .name-card .professional-accent span {
        color: var(--primary);
    }

    .name-card .professional-underline {
        font-family: 'Bookman Old Style', serif;
        font-size: 2.3rem;
        color: var(--professional);
        text-decoration: underline;
        text-underline-offset: 8px;
        text-decoration-thickness: 2px;
    }

    /* 复古风格 */
    .name-card .vintage-serif {
        font-family: 'Courier New', monospace;
        font-size: 2.3rem;
        color: var(--vintage);
        letter-spacing: -1px;
    }

    .name-card .vintage-rough {
        font-family: 'Georgia', serif;
        font-size: 2.5rem;
        color: var(--vintage);
        font-weight: bold;
        letter-spacing: -0.5px;
        position: relative;
    }

    .name-card .vintage-rough::before {
        content: attr(data-text);
        position: absolute;
        left: -1px;
        top: -1px;
        color: rgba(0, 0, 0, 0.2);
        z-index: -1;
    }

    .name-card .vintage-uppercase {
        font-family: 'Times New Roman', serif;
        font-size: 2rem;
        color: var(--vintage);
        text-transform: uppercase;
        letter-spacing: 2px;
        font-weight: bold;
    }

    /* 科技风格 */
    .name-card .tech-glow {
        font-family: 'Orbitron', sans-serif;
        font-size: 2.3rem;
        color: #4cc9f0;
        text-shadow: 0 0 10px rgba(76, 201, 240, 0.7);
    }

    .name-card .tech-mono {
        font-family: 'Consolas', monospace;
        font-size: 2.3rem;
        color: #3ddc84;
        letter-spacing: 1px;
    }
</style>


<div class="container">
    <h1 class="page-title">网站名称样式展示</h1>
    <p class="section-description">以下展示了多种使用纯CSS实现的网站名称样式，适用于不同风格的网站设计，所有效果均不使用任何图片。</p>

    <!-- 现代简约风格 -->
    <div class="style-category">
        <h2 class="category-title"><i class="fas fa-laptop-code"></i> 现代简约风格</h2>
        <div class="name-grid">
            <div class="name-card">
                <div class="name-display">
                    <div class="modern-simple">极简设计</div>
                </div>
                <p class="name-style">现代简约粗体</p>
                <p class="name-description">简洁有力的粗体设计，适合现代感强的品牌</p>
            </div>

            <div class="name-card">
                <div class="name-display">
                    <div class="modern-thin">轻盈空间</div>
                </div>
                <p class="name-style">现代细体</p>
                <p class="name-description">纤细优雅的字体，带来轻盈通透感</p>
            </div>

            <div class="name-card">
                <div class="name-display">
                    <div class="modern-uppercase">未来视觉</div>
                </div>
                <p class="name-style">现代大写字母</p>
                <p class="name-description">全大写设计，搭配宽松字间距</p>
            </div>

            <div class="name-card">
                <div class="name-display">
                    <div class="modern-outline">轮廓创意</div>
                </div>
                <p class="name-style">现代轮廓字</p>
                <p class="name-description">仅保留文字轮廓，简约而富有设计感</p>
            </div>
        </div>
    </div>

    <!-- 创意风格 -->
    <div class="style-category">
        <h2 class="category-title"><i class="fas fa-palette"></i> 创意风格</h2>
        <div class="name-grid">
            <div class="name-card">
                <div class="name-display">
                    <div class="creative-cursive">艺境空间</div>
                </div>
                <p class="name-style">手写体风格</p>
                <p class="name-description">流畅的手写字体，富有艺术气息</p>
            </div>

            <div class="name-card">
                <div class="name-display">
                    <div class="creative-stroke">笔画艺术</div>
                </div>
                <p class="name-style">描边文字</p>
                <p class="name-description">仅文字边缘描边，内部透明</p>
            </div>

            <div class="name-card">
                <div class="name-display">
                    <div class="creative-slant">倾斜创意</div>
                </div>
                <p class="name-style">倾斜文字</p>
                <p class="name-description">轻微倾斜的文字，带来动感</p>
            </div>

            <div class="name-card">
                <div class="name-display">
                    <div class="creative-gradient">渐变视界</div>
                </div>
                <p class="name-style">渐变文字</p>
                <p class="name-description">多彩渐变效果，活力四射</p>
            </div>

            <div class="name-card">
                <div class="name-display">
                    <div class="creative-shadow">童趣乐园</div>
                </div>
                <p class="name-style">阴影创意</p>
                <p class="name-description">夸张阴影效果，适合活泼风格</p>
            </div>
        </div>
    </div>

    <!-- 专业商务风格 -->
    <div class="style-category">
        <h2 class="category-title"><i class="fas fa-briefcase"></i> 专业商务风格</h2>
        <div class="name-grid">
            <div class="name-card">
                <div class="name-display">
                    <div class="professional-bold">环球商务</div>
                </div>
                <p class="name-style">商务粗体</p>
                <p class="name-description">稳重的粗体设计，展现专业感</p>
            </div>

            <div class="name-card">
                <div class="name-display">
                    <div class="professional-elegant">典雅金融</div>
                </div>
                <p class="name-style">商务优雅体</p>
                <p class="name-description">优雅的衬线字体，彰显品质</p>
            </div>

            <div class="name-card">
                <div class="name-display">
                    <div class="professional-accent">先锋<span>科技</span></div>
                </div>
                <p class="name-style">重点强调</p>
                <p class="name-description">部分文字变色，突出重点</p>
            </div>

            <div class="name-card">
                <div class="name-display">
                    <div class="professional-underline">诚信律师</div>
                </div>
                <p class="name-style">下划线风格</p>
                <p class="name-description">精致下划线，传统而正式</p>
            </div>
        </div>
    </div>

    <!-- 复古风格 -->
    <div class="style-category">
        <h2 class="category-title"><i class="fas fa-hourglass-half"></i> 复古风格</h2>
        <div class="name-grid">
            <div class="name-card">
                <div class="name-display">
                    <div class="vintage-serif">时光邮局</div>
                </div>
                <p class="name-style">复古等宽体</p>
                <p class="name-description">等宽字体，带来怀旧感</p>
            </div>

            <div class="name-card">
                <div class="name-display">
                    <div class="vintage-rough" data-text="老街咖啡馆">老街咖啡馆</div>
                </div>
                <p class="name-style">复古粗砺感</p>
                <p class="name-description">轻微叠影效果，营造复古质感</p>
            </div>

            <div class="name-card">
                <div class="name-display">
                    <div class="vintage-uppercase">经典工艺</div>
                </div>
                <p class="name-style">复古大写</p>
                <p class="name-description">复古风格大写字母，庄重典雅</p>
            </div>
        </div>
    </div>

    <!-- 科技风格 -->
    <div class="style-category">
        <h2 class="category-title"><i class="fas fa-microchip"></i> 科技风格</h2>
        <div class="name-grid">
            <div class="name-card">
                <div class="name-display">
                    <div class="tech-glow">量子科技</div>
                </div>
                <p class="name-style">科技发光效果</p>
                <p class="name-description">带发光效果的文字，未来感十足</p>
            </div>

            <div class="name-card">
                <div class="name-display">
                    <div class="tech-mono">代码星球</div>
                </div>
                <p class="name-style">等宽科技体</p>
                <p class="name-description">类似代码字体，适合科技类网站</p>
            </div>
        </div>
    </div>
</div>

